import {render, waitFor, cleanup} from '@testing-library/react';
import '../../src';
import {render as amisRender} from '../../src';
import {makeEnv} from '../helper';
import 'jest-canvas-mock';

afterEach(() => {
  cleanup();
});

const setupQRCode = async (qrcodeProps: any = {}) => {
  const result = render(
    amisRender(
      {
        type: 'page',
        body: {
          type: 'qr-code',
          value: 'amis',
          codeSize: 128,
          ...qrcodeProps
        }
      },
      {},
      makeEnv({})
    )
  );

  await waitFor(() => {
    expect(result.container.querySelector('.cxd-QrCode')).toBeInTheDocument();
  });

  return {
    ...result,
    qrcode: result.container.querySelector('.cxd-QrCode'),
    svgEl: result.container.querySelector('.cxd-QrCode')?.firstElementChild,
    canvasEl: result.container.querySelector('.cxd-QrCode')?.firstElementChild
  };
};

describe('Renderer:qr-code', () => {
  test('QRCode render with svg', async () => {
    const {container, svgEl} = await setupQRCode({
      mode: 'svg'
    });

    expect(svgEl).not.toBeNull();
    expect(container).toMatchSnapshot();
  });

  test('QRCode with background/foreground color in svg', async () => {
    const {container, svgEl} = await setupQRCode({
      backgroundColor: '#108cee',
      foregroundColor: 'yellow',
      mode: 'svg'
    });

    expect(svgEl?.getAttribute('style')).toBe(
      'background-color: rgb(16, 140, 238);'
    );
    expect(svgEl?.firstElementChild?.getAttribute('fill')).toBe('yellow');
    expect(container).toMatchSnapshot();
  });

  test('QRCode with image in svg', async () => {
    const {container, svgEl} = await setupQRCode({
      mode: 'svg',
      imageSettings: {
        src: 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg',
        width: 50,
        height: 30,
        x: 20,
        y: 30
      }
    });
    const imageEl = svgEl?.querySelector('image');

    expect(imageEl).not.toBeNull();
    expect(imageEl?.getAttribute('xlink:href')).not.toBeUndefined();
    expect(Number(imageEl?.getAttribute('x'))).toBeGreaterThan(0);
    expect(Number(imageEl?.getAttribute('y'))).toBeGreaterThan(0);
    expect(Number(imageEl?.getAttribute('width'))).toBeGreaterThan(0);
    expect(Number(imageEl?.getAttribute('height'))).toBeGreaterThan(0);
    expect(container).toMatchSnapshot();
  });

  test('QRCode render with canvas', async () => {
    const {container, canvasEl} = await setupQRCode({});

    expect(canvasEl).not.toBeNull();
    ((canvasEl as HTMLCanvasElement).toDataURL as any).mockReturnValueOnce(
      'data:image/png;base64, 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'
    );
  });

  test('QRCode with background/foreground color in canvas', async () => {
    const {container, canvasEl} = await setupQRCode({
      backgroundColor: '#108cee',
      foregroundColor: 'yellow'
    });
    expect(canvasEl).not.toBeNull();
    ((canvasEl as HTMLCanvasElement).toDataURL as any).mockReturnValueOnce(
      ''
    );
  });

  test('QRCode with image in canvas', async () => {
    const {container, canvasEl} = await setupQRCode({
      imageSettings: {
        src: 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg',
        width: 50,
        height: 30,
        x: 20,
        y: 30
      }
    });
    expect(canvasEl).not.toBeNull();
    ((canvasEl as HTMLCanvasElement).toDataURL as any).mockReturnValueOnce(
      ''
    );
  });
});
